import { defineConfig, presetAttributify, presetUno } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'
import presetRemToPx from '@unocss/preset-rem-to-px'

export default defineConfig({
  content: {
    pipeline: {
      include: [/\.(vue|svelte|[jt]sx|mdx?|html)($|\?)/],
    },
  },
  // presets: [presetUno(), presetAttributify(), presetRemToPx({ baseFontSize: 2 })],
  presets: [presetUno(), presetAttributify()],
  transformers: [
    transformerDirectives(),
  ],
  shortcuts: [
    ['wh-full', 'w-full h-full'],
    ['f-c-c', 'flex justify-center items-center'],
    ['f-c', 'flex items-center'],
    ['f-btw-c', 'flex justify-between items-center'],
    ['flex-col', 'flex flex-col'],
    ['absolute-lt', 'absolute left-0 top-0'],
    ['absolute-lb', 'absolute left-0 bottom-0'],
    ['absolute-rt', 'absolute right-0 top-0'],
    ['absolute-rb', 'absolute right-0 bottom-0'],
    ['absolute-center', 'absolute-lt f-c-c wh-full'],
    ['text-ellipsis', 'truncate'],
    ['b-b-ccc', 'b-b-1rpx b-b-solid b-hex-ccc'],
    ['b-t-ccc', 'b-t-1rpx b-t-solid b-hex-ccc'],
    ['b-l-ccc', 'b-l-1rpx b-l-solid b-hex-ccc'],
    ['b-r-ccc', 'b-r-1rpx b-r-solid b-hex-ccc'],
    ['b-t', 'b-t-1rpx b-t-solid'],
    ['b-b', 'b-b-1rpx b-b-solid'],
    ['b-l', 'b-l-1rpx b-l-solid'],
    ['b-r', 'b-r-1rpx b-r-solid'],
    ['color-3', 'text-hex-333'],
    ['color-6', 'text-hex-666'],
    ['color-8', 'text-hex-888'],
    ['color-9', 'text-hex-999'],
    ['red', 'text-hex-C20007'],
    ['bg-red', 'bg-hex-C20007 text-white'],
    ['b-red', 'b-hex-C20007'],
    ['pointer', 'cursor-pointer']
  ],
  rules: [
    [/^bc-(.+)$/, ([, color]) => ({ 'border': `1rpx solid #${color}` })],
    [/^wh-(.+)$/, ([, size]) => ({ 'width': `${size}`, 'height': `${size}` })],
    [/^lh-(.+)$/, ([, size]) => ({ 'line-height': `${size}` })],
    ['nowrap', { 'white-space': 'nowrap', 'text-wrap': 'nowrap'}],
    [
      'card-shadow',
      { 'box-shadow': '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017' },
    ],
    [
      'box', { 'box-shadow': '0rpx 5rpx 20rpx 0rpx rgba(0,0,0,0.1)', 'background': '#fff' }
    ],
    [
      'box-bottom', { 'box-shadow': '0rpx 5rpx 15rpx 0rpx rgba(0,0,0,0.03)', 'background': '#fff' }
    ]
  ]
})
